<template>
  <div class="padding flex direction-column">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time"></year-month-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid-content">
      <grid-item-one></grid-item-one>
      <grid-item-two title="产值指标趋势"></grid-item-two>
      <bar-chart title="产值排名" unit="亿元"></bar-chart>
      <bar-chart title="产值单耗排名" unit="千克标准煤/万元"></bar-chart>
      <bar-chart title="产值电耗排名" unit="千瓦时/万元"></bar-chart>
    </div>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import BarChart from './bar-chart'
import TimePicker from '@/mixins/time-picker'

export default {
  name: 'energy-efficiency-analysis-production-value',
  mixins: [TimePicker],
  components: {
    GridItemOne,
    GridItemTwo,
    BarChart
  },
  data () {
    return {}
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: $gutter;

    ::v-deep .content-block {
      background: white;
      border-radius: 4px;
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
    .block---2,
    .block---1 {
      grid-column-start: 1;
      grid-column-end: 4;
    }
  }
</style>
